import Taro,{Component} from "@tarojs/taro"
import styles from '../index.module.scss'
import { View, Input, Button , Picker  } from "@tarojs/components"
import { AtIcon } from 'taro-ui'
import { IsChinaMobile , IsHKMobile } from "@/util/validate"
import { sendSms } from '@/api/index'
import { setTelFun , telTimeFun } from '@/actions/login'
import {connect} from '@tarojs/redux'

@connect(({login}) => ({
  tel: login.tel,
  teledTime:login.telTime
}), dispatch => ({
  setTel: (data) => dispatch(setTelFun(data)),
  setTelTime:(data) => dispatch(telTimeFun(data))
}))


class SendTel extends Component {
  state = {
    mobile:'',
    mobileShow:'',
    selector: ['+86', '+852'],
    selectorChecked: '+86',
    selectShow:false,
    IsMobile:false
  }

  sendCode = async() => {
    try {
      const { mobile, IsMobile } = this.state;
      if (!mobile || !IsMobile) return
      const { setTel, setTelTime } = this.props
      Taro.showLoading({title: '短信发送中...', mask: true})
      const { data, code } = await sendSms({mobile: mobile})
      Taro.hideLoading()
      setTel(mobile)
      setTelTime(1)
    } catch(e) {
      Taro.showToast({title: e.message, icon: 'none'})
    }
  }


  onChange = e => {
    const { mobile } = this.state
    this.setState({
      selectorChecked: this.state.selector[e.detail.value],
      selectShow:false,
      IsMobile:(this.state.selector[e.detail.value]=='+86' && IsChinaMobile(mobile) || this.state.selector[e.detail.value]=='+852' && IsHKMobile(mobile))
    })
  }

  onCancel = e => {
    this.setState({
      selectorChecked: this.state.selector[e.detail.value],
      selectShow:false,
      IsMobile:(this.state.selectorChecked=='+86' && IsChinaMobile(mobileTrim) || this.state.selectorChecked=='+852' && IsHKMobile(mobileTrim))
    })
  }

  inputTel = e => {
    let mobileTrim =  e.detail.value.replace(/\s+/g,'');
    this.setState({
      mobileShow: mobileTrim.replace(/^(\d{3})(\d{1,4})(.*)$/, '$1 $2 $3'),
      mobile:mobileTrim,
      IsMobile:(this.state.selectorChecked=='+86' && IsChinaMobile(mobileTrim) || this.state.selectorChecked=='+852' && IsHKMobile(mobileTrim))
    })
  }

  render () {
    const {mobile,mobileShow,IsMobile} = this.state
    return (
     <View className={styles.sendTel}>
        <View className={styles.phoneWrap}>
          <Picker mode='selector' range={this.state.selector} onClick={()=>{this.setState({selectShow:true})}} onChange={this.onChange} sureStyle={'color:red'} onCancel={this.onCancel}>
            <View  className={styles.area}>
              {this.state.selectorChecked}
              <View className={styles.areaSelect} style={this.state.selectShow?{transform:'rotate(180deg)'}:{transform:'rotate(0deg)'}} >
                <AtIcon value='iconfont icon-down' size='12' color='#000000'></AtIcon>
              </View>
            </View>
          </Picker>

          <View className={styles.divide}></View>
          <Input placeholder-style={'color:#CCCCCC;font-size:32rpx;'}
            className={styles.input}
            placeholder={'请输入手机号码'}
            type={'number'}
            value={mobileShow}
            onInput={(e) => this.inputTel(e)}>
          </Input>
        </View>
        <Button className={IsMobile?styles.confirm:styles.notConfirm} onClick={this.sendCode}>获取短信验证码</Button>
     </View>
    )
  }
}

export default SendTel
